<template>
  <view class="tabbox flexspb">
    <view @click="tolink(item.path, index)" class="centtab flexcolumn" :class="{ 'tabactive': index === tab }"
          v-for="(item, index) in tabList" :key="index">
      <image class="tab_img" :src="index == tab ? `/${item.selectedIconPath}` : `/${item.iconPath}`"></image>
      <view class="tab_text">{{ item.title  }}</view>
    </view>
  </view>
</template>

<script>

import {advisePage, eventsPage, indexPage, messagePage, minePage} from "@/util/publicConfig";

export default {
  name: 'tabbox', //tabar切换栏
  props: {
    baseTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabList: [{
        title: "首页",
        path: indexPage,
        iconPath:`static/img/tabbar/home.png`,
        selectedIconPath: "static/img/tabbar/home_selected.png"
      },
        {
          title: "活动",
          path: eventsPage,
          iconPath: `static/img/tabbar/events.png`,
          selectedIconPath: `static/img/tabbar/events_selected.png`
        },
        {
          title: "提建议",
          path: advisePage,
          iconPath: `static/img/tabbar/advise.png`,
          selectedIconPath: `static/img/tabbar/advise.png`
        },
        {
          title: "交流圈",
          path: messagePage,
          iconPath: `static/img/tabbar/message.png`,
          selectedIconPath: `static/img/tabbar/message_selected.png`,
        },
        {
          title: "我的",
          path: minePage,
          iconPath: `static/img/tabbar/mine.png`,
          selectedIconPath: `static/img/tabbar/mine_selected.png`
        }
      ],
      tab: 0, //当前默认选中
    }
  },
  created() {
    this.tab = this.baseTab
  },
  methods: {
    // 关闭所有页面跳转
    tolink(url, tabIndex) {
      this.tab = tabIndex
      uni.redirectTo({url});
    }
  }
}
</script>

<style lang="less" scoped>
.tabbox {
  // width: 100vw;
  background-color: #ffffff;
  box-shadow: 0 10rpx 40rpx #EFEFEF;
  border-top: 1rpx solid #EFEFEF;
  height: 130rpx;
  box-sizing: border-box;
  padding: 20rpx 0 40rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .centtab {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .tab_img {
      width: 48rpx;
      height: 48rpx;
    }

    .tab_text {
      font-size: 20rpx;
      line-height: normal;
      margin-top: 6rpx;
    }

    .tabactive {
      color: #d81d06;
    }
  }

}
</style>
